<template>
  <div class="warp">
    <el-row class="content">
      <!--            <img class="background" src="../../assets/background_1.png">-->

      <div class="form-query-box">
        <el-col :span="20" class="form-query">
          <el-form ref="form" :model="queryObj" size="mini">
            <el-col :span="6">
              <el-form-item label="角色名称" label-width="80px">
                  <el-select size="mini" v-model="queryObj.roles" placeholder="请选择">
                     <el-option v-for="item in optionRolestList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="姓名：" label-width="80px">
                <el-input size="mini" v-model="queryObj.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="校园网账号" label-width="100px">
                <el-input size="mini" v-model="queryObj.mobile"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-col>
        <el-col :span="2" class="query-bar">
          <el-button type="primary" size="small" @click="currentPage = 1;loadData()" round>查询</el-button>
        </el-col>
      </div>
      <div class="content-table">
        <el-table
          :data="tableData"
          border
          size="small"
          style="width: 100%"
          header-row-class-name="table-header"
        >
          <!-- <el-table-column
                            prop="id"
                            label="ID"
                            align="center">
          </el-table-column>-->
          <el-table-column prop="name" label="姓名" align="center"></el-table-column>
          <el-table-column prop="mobile" label="校园网账号" align="center"></el-table-column>
          <el-table-column label="角色名称" align="center">
            <template slot-scope="scope">
              <span v-for="(item,index) in scope.row.roleLists" :key="index">
                {{item.name}}
                <span
                  v-show="item.id != scope.row.roleLists[scope.row.roleLists.length-1].id"
                >,</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="category" label="现领域" align="center"></el-table-column>
          <el-table-column prop="technologyTitle" label="现岗位" align="center"></el-table-column>
          <el-table-column prop="attr0" label="实际工作单位" align="center"></el-table-column>
          <el-table-column prop="memo" label="备注" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div class="operatioin" style="display:flex;justify-content: center;flex-wrap: wrap;">
                <el-button
                  type="primary"
                  @click="currentSelectedData=scope.row;assigningRoles(scope.row)"
                >分配角色</el-button>
                <el-button
                  type="primary"
                  @click="currentSelectedData=scope.row;resetPassword(scope.row)"
                >重置密码</el-button>
              </div>
              <!-- <el-button type="warning">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          background
          layout="total,prev, pager, next"
          @current-change="loadData()"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :pager-count="11"
          :total="total"
        ></el-pagination>
      </div>


      <!-- 弹框  -->
      <el-dialog title="信息" :visible.sync="dialogVisible" width="40%">
        <div class="minTile">
          <div class="line"></div>
          <div>用户：小诺分配角色</div>
        </div>
        <div class="content-table">
          <el-table
            :data="rolestList"
            border
            size="mini"
            style="width: 100%"
            header-row-class-name="table-header"
          >
            <el-table-column prop="largeType" label align="center" width="75">
              <template slot-scope="scope">
                <el-radio
                  :label="scope.row.id"
                  @click="assigningRoles(scope.row)"
                  v-model="currentSelectedRoles"
                >
                  <span></span>
                </el-radio>
              </template>
            </el-table-column>
            <!-- <el-table-column
                                prop="id"
                                label="ID"
                                align="center">
            </el-table-column>-->
            <el-table-column prop="name" label="角色名称" align="center"></el-table-column>
            <el-table-column prop="description" label="角色描述" align="center"></el-table-column>
          </el-table>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
            <el-button type="primary" @click="updateRoles()" size="mini">确 定</el-button>
          </span>
        </div>
      </el-dialog>
    </el-row>

    <div class="aside-fr">
      <h6 class="moduleName">实际工作单位</h6>
      <div v-for="(item,i) in asideNav" :key="i" @click="handleAsideActive(item.name)" :class="{active:item.name == asideActive}">{{item.name}}</div>
    </div>
  </div>
</template>

<script>
import { getRolestListGet, getAccountListGet, assigningRolesPost, resetPasswordGet, findListByType, getAccountFindList} from "@/service/api";
import Qs from "qs";
export default {
  name: "staffTitles",
  data() {
    return {

      dialogVisible: false,

      // 查询条件
      queryObj: {
        roles: "",
        name: "",
        mobile: ""
      },

      // 分配角色
      optionRolestList: [],
      rolestList: [],
      currentSelectedRoles: "",

      // 内容数据
      tableData: [],
      currentSelectedData: "",
      pageSize: 10,
      total: 0,
      currentPage: 1,

      // 右侧导航菜单
      asideNav: [{ name: "全部" }],
      asideActive:"全部",
    };
  },
  mounted() {
      this.loadData();
      this.loadRolesList();
      this.getFindListByType();
  },
  methods: {
      // 右侧导航菜单 - 加载数据
      getFindListByType() {
         let params = { type: "1010002901" };
         findListByType(params).then(res => {
            if (res.code == 200) {
               res.data.forEach(v => {
                  this.asideNav.push(v);
               });
            }
         });
      },
      // 右侧导航菜单 - 点击
      handleAsideActive(name) {
         console.log(name);
         this.asideActive = name;
         this.currentPage = 1;
         this.loadData();
      },
      loadData() {
         var index = 0;

         var jsonData = {};
         jsonData["pageNum"]  = this.currentPage;
         jsonData["pageSize"] = this.pageSize;

         jsonData["orders[" + index + "].direction"] = "desc";
         jsonData["orders[" + index + "].property"] = "createDate";

         if (this.queryObj.roles.trim() != "") {
         jsonData["filterList[" + index + "].property"] = "roles";
         jsonData["filterList[" + index + "].operator"] = "like";
         jsonData["filterList[" + index + "].value"] = this.queryObj.roles;
         ++index;
         }

         if (this.queryObj.name.trim() != "") {
         jsonData["filterList[" + index + "].property"] = "name";
         jsonData["filterList[" + index + "].operator"] = "like";
         jsonData["filterList[" + index + "].value"] = this.queryObj.name;
         ++index;
         }

         if (this.queryObj.mobile != -1) {
         jsonData["filterList[" + index + "].property"] = "mobile";
         jsonData["filterList[" + index + "].operator"] = "like";
         jsonData["filterList[" + index + "].value"] = this.queryObj.mobile;
         ++index;
         }

         let name = this.asideActive;
         if(name === "全部"){
            name = "";
         }
         if (name.length > 0) {
            jsonData["filterList[" + index + "].property"] = "attr";
            jsonData["filterList[" + index + "].operator"] = "like";
            jsonData["filterList[" + index + "].value"] = name;
            ++index;
         }

         getAccountListGet(jsonData).then(res => {
            if (res.code == 200) {
               this.tableData = res.data.content;
               this.pageSize = res.data.pageSize;
               this.total = res.data.total;
               this.currentPage = res.data.pageNum;
            }
         });
      },
      // 加载角色列表 - options  
      loadRolesList() {
         getRolestListGet().then(res => {
            if (res.code == 200) {
               this.rolestList = res.data;
               this.optionRolestList = JSON.parse(JSON.stringify(res.data)); // 深复制
               this.optionRolestList.unshift({ id: "", name: "所有" });
            }
         });
      },
      // 分配角色UI
      assigningRoles(e) {
         this.dialogVisible = true;
         console.log(e);
      },
      // 分配角色实现
      updateRoles() {
         var formData = new FormData();
         formData.append("id", this.currentSelectedData.id);
         formData.append("role", this.currentSelectedRoles);
         assigningRolesPost(formData).then(res => {
            if (res.code == 200) {
                  this.loadData();
                  this.dialogVisible = false;
                  this.$message({type: "success",message: "保存成功!"});
            }
         });
      },
      // 重围密码
      resetPassword(item) {
         this.$confirm( '确定要重置 <span style="color:red">' + item.name + "</span> 的登录密码吗？", "重置密码",{
            dangerouslyUseHTMLString: true,
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
         }).then(() => {
            resetPasswordGet({ userId: item.id }).then(res => {
               if (res.code == 200) {
                  this.$message({
                     type: "success",
                     message: "密码重置成功!"
                  });
               }
            });

         }).catch(() => {
            // 取消
         });
      }
  }
};
</script>

<style scoped>
.warp {
  height: 100%;
  display: flex;
}

.form-query-box {
  height: 50px;
  margin-bottom: 18px;
  padding: 0px 12px;
  /*overflow: hidden;*/
}
.form-query {
  margin-top: 20px;
}

.query-bar {
  margin-top: 20px;
}

.query-bar >>> .el-button {
  width: 80px;
}

.content {
  width: 82%;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 9px 8px 2px rgba(43, 103, 254, 0.05);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.content > .background {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  opacity: 0.08;
}
.content-table {
   margin: 13px 25px;
   border-radius: 5px 5px 0px 0px;
   overflow: hidden;
   overflow: auto;
   height: calc(100% - 130px);
}

.content-table >>> .table-header th {
  background: #e6eaeb !important;
  border: none;
}
.content-table >>> .table-header th div {
  font-weight: bold !important;
  color: #333;
}

.content-table >>> tbody tr:nth-child(even) td {
  background: #f5f8fe;
}

.content-table >>> tbody .el-button {
  padding: 5px 15px;
}
.content-table >>> tbody .operatioin .el-button {
  padding: 5px 15px;
  margin:3px 6px;
}
.pagination {
  margin-top: 10px;
  text-align: end;
  padding-right: 16px;
}

/* 小标题 */
.minTile {
  display: flex;
  align-items: center;
  background: #f5f8fe;
  color: #417ffe;
  font-size: 14px;
  padding: 14px 18px;
  margin: 12px 0px 26px 0px;
}
.minTile > .line {
  width: 3px;
  height: 12px;
  background: #417ffe;
  margin-right: 9px;
}

>>> .el-dialog__header {
  background: #e6eaeb;
}
>>> .el-dialog__title {
  font-size: 15px;
  color: #2d69fe;
}
>>> .el-dialog__headerbtn .el-dialog__close {
  font-size: 15px;
  font-weight: bold;
}
>>> .el-dialog__body,
>>> .content-table {
  padding: 0px;
}

.dialog-footer {
  padding: 20px;
  display: flex;
  justify-content: center;
}
.dialog-footer > button {
  margin: 0px 20px;
}
.warp >>> .el-table--small {
  font-size: 13px;
}

/* 右侧导航样式 */
.moduleName {
  background: #31478f;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: bold;
  padding: 11px 0px;
  text-align: center;
  color: white;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.aside-fr {
  width: 18%;
  min-height: 520px;
  margin-left: 10px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 9px 8px 2px rgba(43, 103, 254, 0.05);
  border-radius: 5px;
  overflow-x: hidden;
  overflow-y: scroll;
}
/*.aside-fr::-webkit-scrollbar {*/
/*width: 9px;  !* 横向滚动条宽度 *!*/
/*height: 9px; !* 竖向滚动条宽度 *!*/
/*background: rgba(0,0,0,.0);*/
/*border:none;*/
/*}*/
/*!* 滚动条 - 滚动块样式 *!*/
/*.aside-fr::-webkit-scrollbar-thumb {*/
/*background: rgba(0,0,0,.0);*/
/*border:none;*/
/*border-radius:4px*/
/*}*/
.aside-fr > div {
  height: 38px;
  line-height: 38px;
  text-align: center;
  color: #999999;
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  font-size: 14px;
}
.aside-fr > div.active {
  background: #f5f8fd;
  color: #31478f;
  font-weight: bold;
  position: relative;
}
.aside-fr > div.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 38px;
  background: #31478f;
}
</style>
